<style lang="scss" scoped>
    @import './index.scss';
</style>

<template>
  <div>
      <div class="c-head">
        <div class="username">设置新子管理员</div>
      </div>

      <div class="c-body">
        <x-input-item v-model="username"
          class="m-mb-30"
          label="*名字"
          placeholder="填写名字"
          style="margin-top:30px;"/>

        <x-input-item v-model="authStr"
          class="m-mb-30 cursor"
          label="*管理权限"
          placeholder="请选择"
          readonly @click.native="showPopAuth"/>

        <x-input-item class="m-mb-30" v-model="date" label="*管理期限至（默认为商户版本到期日期）" placeholder="2018-12-31 23:59:59"/>
        <x-input-item v-model="duty" label="职能" placeholder="请填写"/>
        <button class="up-submit" :disabled="!disabled" @click="submit">生成动态二维码开通子管理员</button>
      </div>

      <yd-popup v-model="popAuth" position="center" width="750px">
        <div class="pop-content">
            <div class="pop-title2">管理权限 <yd-icon name="error" size="20px" color="#FF523E" class="pop-close" @click.native='popAuth = false'></yd-icon></div>
            <yd-checklist v-model="oauth" class="pop-checklist">
                <yd-checklist-item val="outframe" style="width: 100%;">
                    <div class="pop-item">外框</div>
                </yd-checklist-item>
                <yd-checklist-item val="infram">
                    <div class="pop-item">内框</div>
                </yd-checklist-item>
                <yd-checklist-item val="outmatcard">
                    <div class="pop-item">外衬卡纸</div>
                </yd-checklist-item>
                <yd-checklist-item val="middlematcard">
                    <div class="pop-item">中衬卡纸</div>
                </yd-checklist-item>
                <yd-checklist-item val="inmatcard">
                  <div class="pop-item">内衬卡纸</div>
                </yd-checklist-item>

                <div class="bg-ccc"></div>
                <yd-checklist-item val="agent">
                    <div class="pop-item">微代理</div>
                </yd-checklist-item>
                <yd-checklist-item val="paint">
                    <div class="pop-item">画芯</div>
                </yd-checklist-item>
                <div class="bg-ccc"></div>
                <yd-checklist-item val="order">
                  <div class="pop-item">订单</div>
                </yd-checklist-item>
            </yd-checklist>
            <div class="bg-block-ccc">
                <yd-button type="primary" class="submit-btn" @click.native="changeDuty">完成</yd-button>
            </div>
        </div>
    </yd-popup>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        popAuth: false,
        username: '',
        duty: '',
        date: '2018-12-31 23:59:59',
        oauth: [],
        auth: [],
        authObj: {
          outframe: '外框',
          infram: '内框',
          outmatcard: '外衬卡纸',
          middlematcard: '中衬卡纸',
          inmatcard: '内衬卡纸',
          agent: '微代理',
          paint: '画芯',
          order: '订单'
        }
      }
    },
    computed: {
      disabled () {
        return this.auth.length && this.date && this.username
      },
      authStr () {
        return this.auth.map(val => {
            return this.authObj[val]
        }).join('、')
      }
    },
    mounted () {
      console.log(1)
    },
    methods: {
      submit () {
        localStorage.setItem('username', this.username)
        localStorage.setItem('duty', this.duty)
        localStorage.setItem('date', this.date)
        localStorage.setItem('auth', this.auth)
        this.$router.push({
          path: '/manager/authorization'
        })
      },
      changeDuty () {
        console.log(this.auth)
        this.auth = [...this.oauth]
        this.popAuth = false
      },
      showPopAuth () {
        this.popAuth = true
        this.oauth = [...this.auth]
      },
      init () {
        this.username = ''
        this.duty = ''
        this.date = ''
        this.auth = []
      }
    },
    watch: {
      $route (v, v2) {
        if (v.query.id !== v2.query.id) {
          this.init()
        }
      }
    }
  }
</script>
